<template>
<div class="container">
    <div class="view">
        <Carousel v-model="value" :height="455" :autoplay="setting.autoplay" :autoplay-speed="setting.autoplaySpeed" :dots="setting.dots" :radius-dot="setting.radiusDot" :trigger="setting.trigger" :arrow="setting.arrow">
            <CarouselItem v-for="(item, index) in imgData" :key="index">
                <div class="banner-img">
                    <img :src="item" alt="">
                </div>
            </CarouselItem>
        </Carousel>
    </div>
    <div class="container-banner">
        <ul>
            <li v-for="(item,i) in imgData2" :key="i">
                <img :src="item" alt="">
            </li>
        </ul>
    </div>
</div>
</template>

<script>
export default {

    data() {
        return {
            value: 0,
            setting: {
                autoplay: true,
                autoplaySpeed: 5000,
                dots: 'inside',
                radiusDot: true,
                trigger: 'hover',
                arrow: 'hover'
            },
            imgData: {
                message: require('@/assets/banner1.png'),
                image1: require('@/assets/banner1.png'),
                image2: require('@/assets/banner1.png'),
                image3: require('@/assets/banner1.png'),
            },
            imgData2: {
                banner1: require('@/assets/banner2.png'),
                banner2: require('@/assets/banner3.png'),
                banner3: require('@/assets/banner4.png'),
            }

        }
    },

}
</script>

<style lang="less">
.container {
    position: relative;
}

.view {
    width: 100%;
    height: 455px;

    .banner-img {
        width: 100%;
        height: 100%;

        img {
            width: 100%;
            height: 100%;
        }
    }

}

.container-banner {
    height: 100%;
    position: absolute;
    top: 0;
    right: 10px;

    ul {
        height: 100%;
        display: flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: -moz-flex;
        flex-direction: column;
        justify-content: space-around;
    }

}

.ivu-carousel-arrow.left {
left: 230px;
        }
.ivu-carousel-arrow.right{
    right: 200px;
}
</style>
